<!DOCTYPE html>
<html>
<head>
    <title>EnglishSpanishGame</title>
    <meta id="viewport" name="viewport" content="user-scalable=no,
        width=device-width" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="util.js"></script>
</head>

<body style="background-color:black" onLoad= "fillOptions()">
	<font color = "white">
		<div align='center'>
			<FONT FACE='Comic Sans MS' SIZE=6 COLOR='3300CC'>What's the spanish translation of?<div id="question">Here is the question</div></FONT>
			<br/>
			<table>
				<tr>
					<td align = "center" height = "150" width = "250" onclick = "squareSelected('1')" style="background: url(images/option.gif) no-repeat center"><FONT FACE='Comic Sans MS' SIZE=6 COLOR='3300CC'><div id="option1">Option 1</div></FONT></td>
					<td align = "center" height = "150" width = "250" onclick = "squareSelected('2')" style="background: url(images/option.gif) no-repeat center"><FONT FACE='Comic Sans MS' SIZE=6 COLOR='3300CC'><div id="option2">Option 2</div></FONT></td>
				</tr>
				<tr>
					<td align = "center" height = "150" width = "250" onclick = "squareSelected('3')" style="background: url(images/option.gif) no-repeat center"><FONT FACE='Comic Sans MS' SIZE=6 COLOR='3300CC'><div id="option3">Option 3</div></FONT></td>
					<td align = "center" height = "150" width = "250" onclick = "squareSelected('4')" style="background: url(images/option.gif) no-repeat center"><FONT FACE='Comic Sans MS' SIZE=6 COLOR='3300CC'><div id="option4">Option 4</div></FONT></td>
				</tr>
			</table>
			<div id="choosedOption"></div>
			<br/>
			<br/>
			<FONT FACE='Comic Sans MS' SIZE=6 COLOR='660066'><div id = "score"></div></FONT>
			<div onclick = "resetScore()">reset score</div>
		</div>
	</font>
</body>
</html>